<html>
<head>
<title>Keypad - Prototype</title>

<style type='text/css'>
body{
font-family: arial;
}
div.tight {
padding:0;
text-align: left;
}

</style>
<link id="keypad-css" rel="stylesheet" type="text/css" href="../style/keypad/keypad-100.css" />
<% 
 String JS_PREFIX="../";
String  JS_KEYPAD_PATH = "keypad"; 
%>

<script>
var _kp1,_kp2;
function clickster(e) {
  //alert('clickster '+e);
}
function pageLoaded() {
  //alert('page loaded');
  _kp1=new Keypad('thekeypad', function(val) {alert("1 YES SIREE "+val); } );
  _kp2=new Keypad('thekeypadNumber2', function(val) {alert("2 YES SIREE "+val); } );
  _kp3=new Keypad('thekeypadNumber3', function(val) {alert("3 YES SIREE "+val); } );
  _kp2.setEnabled(false);
}
</script>

</head>

<body onload="pageLoaded()">

KEYPAD
<table cellpadding="0" cellspacing="0" border='1' xwidth='200'>
<tbody>
<tr align="left">
<td><div class='tight' id='thekeypad' onclick='clickster(this);' style='padding: 0px;background-color:pink; border: green thin solid'></div></td>
<td bgcolor="orange" align="left"><div class='tight' id='thekeypadNumber2'></div></td>
<td><div class='tight' id='thekeypadNumber3'></div></td>
</tr>
<tr>
<td><button onclick="_kp1.setEnabled(true);">enable-1</button>
<button onclick="_kp1.setEnabled(false);">disable-1</button></td>
<td><button onclick="_kp2.setEnabled(true);">enable-2</button>
<button onclick="_kp2.setEnabled(false);">disable-2</button></td>
<td><button onclick="_kp3.setEnabled(true);">enable-3</button>
<button onclick="_kp3.setEnabled(false);">disable-3</button></td>
</tr>
</tbody>
</table>


<script type='text/javascript' src='<%= JS_PREFIX %>js/<%= JS_KEYPAD_PATH %>/keypad.js'></script>




</body>

</html>